<template>
  <view class="options">
    <view class="select">
      <view class="select_content" @click="periodShow = true">
        <text>{{ period | periodFilter }}</text>
        <view class="select_icon">
          <u-icon name="arrow-down-fill" color="#ffffff" size="18"></u-icon>
        </view>
      </view>
      <u-select
        v-model="periodShow"
        mode="single-column"
        :list="periodList"
        @confirm="handleChangePeriod"
      ></u-select>
    </view>
    <view class="list" v-if="compositionList.length > 0">
      <view
        class="list_content"
        :class="{ active: index === currentIndex }"
        v-for="(item, index) in compositionList"
        :key="index"
        @click="getData(index)"
      >
        <text>{{ item.typeName }}</text>
      </view>
    </view>
  </view>
</template>
<script>
import { getStore } from "@/libs/storage";
import { getTypeList } from "@/api/composition";
export default {
  name: "Composition-List",
  filters: {
    periodFilter(status) {
      const statusMap = {
        1: "小学万能作文",
        2: "初中万能作文",
        3: "高中万能作文",
      };
      return statusMap[status];
    },
  },
  computed: {
    currentItem() {
      return this.compositionList[this.currentIndex] || {};
    },
  },
  created() {
    this.init();
  },
  data() {
    return {
      period: getStore({
        name: "composition_period",
      }),
      periodShow: false,
      periodList: [
        {
          value: "1",
          label: "小学万能作文",
        },
        {
          value: "2",
          label: "初中万能作文",
        },
        {
          value: "3",
          label: "高中万能作文",
        },
      ],
      compositionList: [],
      currentIndex: 0,
    };
  },
  methods: {
    init() {
      this.handleChangePeriod();
    },
    handleChangePeriod(e) {
      if (e) this.period = e[0].value;
      this.currentIndex = 0;
      let params = {
        period: this.period,
      };
      getTypeList(params).then((res) => {
        this.compositionList = res.data;
        this.getData(this.currentIndex);
      });
    },
    getData(index) {
      this.currentIndex = index;
      this.$emit("select", this.currentItem);
    },
  },
};
</script>
<style scoped lang="scss">
@import "./CompositionList";
</style>
